<template>
<TnNavbar fixed> 专业课程 </TnNavbar>
  <view style="margin-top: 10px;display: flex;justify-content: center;align-items: center;">
    <TnSearchBox style="flex: 1;"
    v-model="searchValue"
    @input="searchInputEvent"
    @search="searchBtnClickEvent"
  />
  <view class="menu" @click="onShowPopup">
    <TnIcon name="search-menu" size="26px" color="#fff" />
  </view>
    
</view>

<view class="case-list">
    <view
        v-for="(item, index) in projectCaseData"
        :key="index"
        class="case-item tn-shadow-blur"
        :style="{ backgroundImage: `url(${item.mainImage})` }"
    >
        <view class="title">{{ item.title }}</view>
        <view class="float">
            <view class="sub1" v-if="item.sub1 === '免费'">{{ item.sub1 }}</view>
			<view class="sub3" v-else>{{ item.sub1 }}</view>
            <view class="sub2">{{ item.content }}</view>
        </view>
    </view>
</view>

<TnPopup v-model="showPopup" open-direction="bottom">
    <view class="tn-p-lg"> 
        <TnTitle title="地区" size="lg" mode="hLine" assist-color="tn-red" />
        <view style="display: flex;flex-wrap: wrap;">
            <TnTag type="info" v-for="(item, index) in regions" :key="index" style="margin-top: 5px;margin-right: 5px;">{{ item }}</TnTag>
        </view>
        <view style="height: 10px;"></view>
        <TnTitle title="时间" size="lg" mode="hLine" assist-color="tn-red" />
        <view style="display: flex;flex-wrap: wrap;">
            <TnTag type="info" v-for="(item, index) in years" :key="index" style="margin-top: 5px;margin-right: 5px;">{{ item }}</TnTag>
        </view>
        <view style="height: 10px;"></view>
        <TnTitle title="税价类型" size="lg" mode="hLine" assist-color="tn-red" />
        <view style="display: flex;flex-wrap: wrap;">
            <TnTag type="info" v-for="(item, index) in prices" :key="index" style="margin-top: 5px;margin-right: 5px;">{{ item }}</TnTag>
        </view>
        <view style="height: 10px;"></view>
        <TnTitle title="查看方式" size="lg" mode="hLine" assist-color="tn-red" />
        <view style="display: flex;flex-wrap: wrap;">
            <TnTag type="info"  v-for="(item, index) in periods" :key="index" style="margin-top: 5px;margin-right: 5px;">{{ item }}</TnTag>
        </view>

        
        
        <view style="height: 20px;"></view>
        <view class="btns">
            <view class="btn1">重置</view>
            <view class="btn2">查询</view>
        </view>
    </view>
  </TnPopup>
</template>

<script lang="ts" setup>
import { ref }from 'vue'
import TnSearchBox from '@tuniao/tnui-vue3-uniapp/components/search-box/src/search-box.vue'
import TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue'
import TnPopup from '@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue'
import TnTitle from '@tuniao/tnui-vue3-uniapp/components/title/src/title.vue'
import TnTag from '@tuniao/tnui-vue3-uniapp/components/tag/src/tag.vue'


const showPopup = ref(false)
const onShowPopup = () => {
    showPopup.value = true
}

const regions = ['所有地市', '广东省', '广州市', '韶关市', '深圳市', '珠海市','汕头市',
'佛山市',
'江门市',
'湛江市',
'茂名市',
'肇庆市',
'惠州市',
'梅州市',
'汕尾市',
'河源市',
'阳江市',
'清远市',
'东莞市',
'中山市',
'潮州市',
'揭阳市',
'云浮市',]

const years = ['2024年',
'2023年',
'2022年',
'2021年',
'2020年',
'2019年',
'2018年',
'2017年',
'2016年',
'2015年',
'2014年',
'2013年',
'2012年',
'2011年',
'2010年',
'2009年',
'2008年',
'2007年',
'2006年',
'2005年',
]


const prices = ['含税价','除税价']
const periods = ['按期数','地市综合价','年度综合价']


const    projectCaseData = [
      {
        id: '1',
        title: '同望工程造价管理软件',
        desc: '项目案例1描述',
		sub1: '免费',
        content: '22369 人学习',
        mainImage:
          'https://www.tgcost.com/upload1/base/png/202311/1701070491403_2398.png',
        tags: [],
        hotCount: 0,
        replyCount: 0,
        likeCount: 0,
        viewCount: 0,
        shareCount: 0,
        viewUsersAvatar: [],
        recommend: false,
      },
      {
        id: '2',
        title: '公路电子标导入导出',
        desc: '项目案例2描述',
		sub1: '免费',
        content: '8503 人学习',
        mainImage:
          'https://www.tgcost.com/upload1/base/png/202311/1701070521721_435.png',
        tags: [],
        hotCount: 0,
        replyCount: 0,
        likeCount: 0,
        viewCount: 0,
        shareCount: 0,
        viewUsersAvatar: [],
        recommend: false,
      },
      {
        id: '3',
        title: '项目成本测算计价',
        desc: '项目案例3描述',
		sub1: '免费',
        content: '1466 人学习',
        mainImage:
          'https://www.tgcost.com/upload1/base/png/202311/1701070535972_7568.png',
        tags: [],
        hotCount: 0,
        replyCount: 0,
        likeCount: 0,
        viewCount: 0,
        shareCount: 0,
        viewUsersAvatar: [],
        recommend: false,
      },
      {
        id: '4',
        title: '实用功能操作',
        desc: '项目案例4描述',
		sub1: '免费',
        content: '13792 人学习',
        mainImage:
          'https://www.tgcost.com/upload1/base/png/202311/1701070547993_2330.png',
        tags: [],
        hotCount: 0,
        replyCount: 0,
        likeCount: 0,
        viewCount: 0,
        shareCount: 0,
        viewUsersAvatar: [],
        recommend: false,
      },
      {
        id: '5',
        title: '公路造价各项费用精讲',
        desc: '项目案例5描述',
		sub1: '￥179.0',
        content: '2349 人学习',
        mainImage:
          'https://resource.tuniaokj.com/images/publicity/publicity-vue2.jpg',
        tags: [],
        hotCount: 0,
        replyCount: 0,
        likeCount: 0,
        viewCount: 0,
        shareCount: 0,
        viewUsersAvatar: [],
        recommend: false,
      },
    ]

  const searchValue = ref('')
  const searchInputEvent = (value: string) => {
  // eslint-disable-next-line no-console
  console.log('searchInputEvent', value)
}
const searchBtnClickEvent = (value: string) => {
  // eslint-disable-next-line no-console
  console.log('searchBtnClickEvent', value)
}
</script>

<style lang="scss" scoped>
@import './styles/index.scss';
</style>
